<script setup lang="ts">
import { reqHasSpu, reqSkuInfoList, reqDeleteSpu } from '@/api/product/spu'
import type { ISpuList, ISkuItem } from '@/api/product/spu/types'
import { useCategoryStore } from '@/stores/modules/category'
import SpuForm from './spuForm.vue'
import SkuForm from './skuForm.vue'
const categoryStore = useCategoryStore()
const scene = ref(0)
const spuArr = ref<ISpuList[]>([])
const totalNum = ref<number>(10)
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
const spuFormRef = ref()
const skuFormRef = ref()

watch(
  () => categoryStore.cate3Id,
  () => {
    if (!categoryStore.cate3Id) return
    getHasSpu()
  }
)
const getHasSpu = async () => {
  // currentPage.value = pager
  const result = await reqHasSpu(currentPage.value, pageSize.value, categoryStore.cate3Id)
  if (result.code == 200) {
    spuArr.value = result.data.records
    totalNum.value = result.data.total
  }
}
// 路由跳转 组件销毁前把仓库数据清空
onBeforeUnmount(() => {
  categoryStore.$reset()
})
// 子组件切换场景
const changeScene = (value: number) => {
  scene.value = value
  getHasSpu()
}
const handleEdit = (row: ISpuList) => {
  scene.value = 1
  spuFormRef.value.initHasSpuData(row)
}
const handleAddSpu = () => {
  scene.value = 1
  spuFormRef.value.initAddSpuData(categoryStore.cate3Id)
}
const handleAddSku = (spuId: number, tmId: number) => {
  scene.value = 2
  skuFormRef.value.initData(categoryStore.cate1Id, categoryStore.cate2Id, categoryStore.cate3Id, spuId, tmId)
}
const SkuArr = ref<ISkuItem[]>([])
const dialogVisible = ref(false)
const handleSkuInfoList = async (spuId: number) => {
  const result = await reqSkuInfoList(spuId)
  if (result.code == 200) {
    SkuArr.value = result.data
    dialogVisible.value = true
  } else {
    ElMessage.error('获取Sku数据失败')
  }
}
const handleDeleteSpu = async (spuId: number) => {
  const result = await reqDeleteSpu(spuId)
  if (result.code == 200) {
    getHasSpu()
    ElMessage.success('spu已删除')
  } else {
    ElMessage.error('Spu删除失败')
  }
}

// 路由跳转 组件销毁前把仓库数据清空
onBeforeUnmount(() => {
  categoryStore.$reset()
})
</script>

<template>
  <div>
    <Category :scene="scene" />
    <br />
    <el-card>
      <div v-show="scene == 0">
        <el-button type="primary" icon="Plus" @click="handleAddSpu" :disabled="!categoryStore.cate3Id">添加SPU</el-button>
        <el-table :data="spuArr" border stripe style="margin-top: 17px">
          <el-table-column type="index" label="序号" width="80px" align="center" />
          <el-table-column label="SPU名称" width="250px" prop="spuName"></el-table-column>
          <el-table-column label="SPU描述" show-overflow-tooltip>
            <template #default="{ row }">
              <p>{{ row.description }}</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280px">
            <template #default="{ row }">
              <el-button type="primary" icon="Plus" title="增加" @click="handleAddSku(row.id, row.tmId)"></el-button>
              <el-button type="warning" icon="Edit" title="编辑" @click="handleEdit(row)"></el-button>
              <el-button type="info" icon="Memo" title="详情" @click="handleSkuInfoList(row.id)"></el-button>
              <el-popconfirm :title="`确认删除-${row.spuName}-吗?`" width="120px" @confirm="handleDeleteSpu(row.id)">
                <template #reference>
                  <el-button type="danger" icon="Delete" title="删除"></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="totalNum || 1"
          :page-sizes="[3, 10, 20, 50]"
          layout="prev, pager, next, jumper,->,sizes, total"
          background
          style="margin-top: 10px"
          :pager-count="7"
          @size-change="getHasSpu"
          @current-change="getHasSpu"
        ></el-pagination>
        <!-- 显示sku列表对话框 -->
        <el-dialog v-model="dialogVisible" title="Sku列表" width="70%">
          <el-table :data="SkuArr" border stripe>
            <el-table-column label="sku名字" prop="skuName"></el-table-column>
            <el-table-column label="sku价格" prop="price"></el-table-column>
            <el-table-column label="sku重量" prop="weight"></el-table-column>
            <el-table-column label="sku图片">
              <template #default="{ row }">
                <el-image :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
      <div v-show="scene == 1"><SpuForm ref="spuFormRef" @changeScene="changeScene" /></div>
      <div v-show="scene == 2"><SkuForm ref="skuFormRef" @changeScene="changeScene" /></div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped></style>
